<template>
  <!-- 通信协议 -->
  <Col
    span="24"
    class="col_2"
  >
  <div class="h3_title">
    <h3>通信协议</h3>
  </div>
  <div class="button_add">
    <Button
      size="small"
      @click="addNew"
      :disabled="userRole==='ROLE_DEMO'"
    > 新增 </Button>
  </div>
  <div class="table_list">
    <Table
      border
      :columns="userRole==='ROLE_DEMO'?agreementTableDemo:agreementTable"
      :data="data"
    ></Table>
  </div>

  <Modal
    v-model="dialog"
    :title="title"
  >
    <Form
      ref="formValidateRef"
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="80"
    >
      <FormItem
        label="协议名称:"
        prop="name"
      >
        <Input
          v-model="formValidate.name"
          placeholder="请输入协议名称..."
        ></Input>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button
        type="primary"
        @click="handleSubmit "
      >确定</Button>
      <Button @click="dialog=false;">取消</Button>
    </div>
  </Modal>
  </Col>
</template>
<script>
import { agreementTable } from "./material/tableColums";
import {
  getArguments,
  postArguments,
  putArguments,
  delArguments
} from "@/api";
import { validateAddress } from "@/utils/rules";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      userRole: state => state.userInfo.rname
    })
  },
  mounted() {
    this._getArguments();
  },
  data() {
    const that = this;
    return {
      agreementTable: agreementTable(that, false),
      agreementTableDemo: agreementTable(that, true),
      dialog: false,
      isEdit: false,
      title: "新增通信协议",
      data: [],
      selectRow: {},
      formValidate: {
        name: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            validator: validateAddress(
              "通信协议",
              "通信协议只能输入中文、字母、数字、下划线和中划线"
            ),
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    // 获取列表
    _getArguments() {
      getArguments().then(res => {
        if (res.code == 200) {
          this.data = res.data;
        }
      });
    },

    // 打开新建dialog
    addNew() {
      this.dialog = true;
      this.isEdit = false;
      this.$refs.formValidateRef.resetFields();
    },

    // 表单提交
    handleSubmit() {
      let name = this.formValidate.name,
        that = this;
      that.$refs.formValidateRef.validate(valid => {
        if (valid) {
          if (that.isEdit) {
            that._putArguments();
          } else {
            that._postArguments(name);
          }
        }
      });
    },

    // post 提交
    _postArguments(name) {
      let that = this;
      postArguments({
        name
      }).then(res => {
        if (res.code == 200) {
          that.$Message.success("操作成功");
          that._getArguments();
          that.dialog = false;
        } else {
          that.$Message.error(res.message);
        }
      });
    },

    // 打开编辑dialog
    handleEdit(row) {
      this.dialog = true;
      this.isEdit = true;
      this.selectRow = { ...row };
      this.$refs.formValidateRef.resetFields();
      this.formValidate.name = row.name;
      this.title = "编辑通信协议";
    },

    // 编辑提交
    _putArguments() {
      let that = this,
        param = {
          name: that.formValidate.name,
          id: that.selectRow.id
        };
      putArguments(param).then(res => {
        if (res.code == 200) {
          that.$Message.success("操作成功");
          that._getArguments();
          that.dialog = false;
        } else {
          that.$Message.error(res.message);
        }
      });
    },

    // 删除提交
    handleDelete(row) {
      let id = row.id;
      let that = this;
      delArguments(id).then(res => {
        if (res.code == 200) {
          that.$Message.success("操作成功");
          that._getArguments();
        } else {
          that.$Message.error(res.message);
        }
      });
    }
  }
};
</script>
